<template>
  <div class="app">
    <a-breadcrumb style="margin-bottom: 10px">
      <a-breadcrumb-item>房屋管理/非商铺管理</a-breadcrumb-item>
    </a-breadcrumb>
    <a-row class="pd20 mt20">
      <a-col :span="6">
        街道：
        <a-input placeholder="请输入" v-model="queryForm.streetName" />
      </a-col>
      <a-col :span="6">
        巷段：
        <a-input placeholder="请输入" v-model="queryForm.lineName" />
      </a-col>
      <a-col :span="6">
        门牌号
        <a-input placeholder="请输入" v-model="queryForm.addressNumber" />
      </a-col>
      <a-col :span="6">
        用途类型：
        <a-input placeholder="请输入" v-model="queryForm.application" />
      </a-col>
      <a-col :span="4">
        <a-button type="primary" @click="handleSearch"> 查询 </a-button>&emsp;&nbsp;
        <a-button @click="cleanQuery">重置</a-button>
      </a-col>
    </a-row>
    <a-row class="pd20 mt20">
      <div class="btn_box">
        <div>非商铺管理</div>
        <a-button
          type="primary"
          @click="addFn"
          v-hasPermi="['zhonghe:lxzz:add']"
          >添加</a-button
        >
      </div>
      <!-- , y: tableHeight -->
      <a-spin :spinning="loading">
        <a-table
          :scroll="{ x: 2200 }"
          :columns="columns"
          :data-source="tableData"
          :pagination="false"
          :rowKey="(record) => record.id"
        >
          <template slot="description" slot-scope="text, record">
            <ToolTip :text="text" />
          </template>
          <span slot="action" slot-scope="text, record">
            <a @click="editFn(text, record)" v-hasPermi="['zhonghe:lxzz:edit']"
              >修改</a
            >
            <a-divider type="vertical" />
            <a
              @click="delFn(text, record)"
              v-hasPermi="['zhonghe:lxzz:del']"
              class="red"
              >删除</a
            >
          </span>
        </a-table>
        <div class="page_box">
          <a-pagination
            v-model="queryForm.offset"
            :page-size-options="['20', '30', '40', '50']"
            :total="total"
            show-size-changer
            :page-size="queryForm.current"
            @showSizeChange="onShowSizeChange"
            @change="pageChange"
            :show-total="(total) => `共 ${total} 条`"
          ></a-pagination>
        </div>
      </a-spin>
    </a-row>
    <a-modal
      title="非商铺管理配置"
      :visible="dialogVisible"
      width="70%"
      ok-text="确认"
      cancel-text="取消"
      @cancel="dialogVisible = false"
      @ok="putDict"
    >
      <div style="height: 700px; overflow: auto">
        <a-form :form="form">
          <a-row>
            <a-col :span="12">
              <a-form-item
                :label-col="formItemLayout.labelCol"
                :wrapper-col="formItemLayout.wrapperCol"
                label="是否院落"
              >
                <a-select
                  v-decorator="[
                    'courtyard',
                    { rules: [{ required: true, message: '请选择' }] },
                  ]"
                  placeholder="请选择"
                >
                  <a-select-option
                    v-for="(item, index) in isYardList"
                    :key="index"
                    :value="item.value"
                  >
                    {{ item.label }}
                  </a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
            <a-col :span="12">
              <a-form-item
                :label-col="formItemLayout.labelCol"
                :wrapper-col="formItemLayout.wrapperCol"
                label="院落布局"
              >
                <a-select
                  v-decorator="[
                    'courtyardLayout',
                    { rules: [{ required: true, message: '请选择' }] },
                  ]"
                  placeholder="请选择"
                >
                  <a-select-option
                    v-for="(item, index) in courtyardLayoutList"
                    :key="index"
                    :value="item.dictValue"
                  >
                    {{ item.dictLabel }}
                  </a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
            <a-col :span="12">
              <a-form-item
                :label-col="formItemLayout.labelCol"
                :wrapper-col="formItemLayout.wrapperCol"
                label="土地性质"
              >
                <a-select
                  v-decorator="[
                    'landNature',
                    { rules: [{ required: true, message: '请选择' }] },
                  ]"
                  placeholder="请选择"
                >
                  <a-select-option
                    v-for="(item, index) in landNatureList"
                    :key="index"
                    :value="item.dictValue"
                  >
                    {{ item.dictLabel }}
                  </a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
            <a-col :span="12">
              <a-form-item
                :label-col="formItemLayout.labelCol"
                :wrapper-col="formItemLayout.wrapperCol"
                label="保护范围"
              >
                <a-select
                  v-decorator="[
                    'msBhfw',
                    { rules: [{ required: true, message: '请选择' }] },
                  ]"
                  placeholder="请选择"
                >
                  <a-select-option
                    v-for="(item, index) in msBhfwList"
                    :key="index"
                    :value="item.dictValue"
                  >
                    {{ item.dictLabel }}
                  </a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
            <!-- <a-col :span="12">
              <a-form-item
                :label-col="formItemLayout.labelCol"
                :wrapper-col="formItemLayout.wrapperCol"
                label="原综合指挥系统id"
              >
                <a-select
                  v-decorator="[
                    'noShopId',
                    { rules: [{ required: true, message: '请选择' }] },
                  ]"
                  placeholder="请选择"
                >
                  <a-select-option
                    v-for="(item, index) in propertyRightList"
                    :key="index"
                    :value="item.dictValue"
                  >
                    {{ item.dictLabel }}
                  </a-select-option>
                </a-select>
              </a-form-item>
            </a-col> -->
            <a-col :span="12">
              <a-form-item
                :label-col="formItemLayout.labelCol"
                :wrapper-col="formItemLayout.wrapperCol"
                label="普查时间"
              >
                <a-date-picker
                  v-decorator="[
                    'pushTime',
                    { rules: [{ required: true, message: '请选择' }] },
                  ]"
                  placeholder="请选择"
                  format="YYYY-MM-DD"
                />
              </a-form-item>
            </a-col>

            <a-col :span="12">
              <a-form-item
                :label-col="formItemLayout.labelCol"
                :wrapper-col="formItemLayout.wrapperCol"
                label="详细地址描述"
              >
                <a-input
                  v-decorator="[
                    'addressDetail',
                    { rules: [{ required: true, message: '请输入' }] },
                  ]"
                  placeholder="请输入"
                /> </a-form-item
            ></a-col>
            <a-col :span="12">
              <a-form-item
                :label-col="formItemLayout.labelCol"
                :wrapper-col="formItemLayout.wrapperCol"
                label="详细地址门牌号"
              >
                <a-input
                  v-decorator="[
                    'addressNumber',
                    { rules: [{ required: true, message: '请输入' }] },
                  ]"
                  placeholder="请输入"
                /> </a-form-item
            ></a-col>
            <a-col :span="12">
              <a-form-item
                :label-col="formItemLayout.labelCol"
                :wrapper-col="formItemLayout.wrapperCol"
                label="用途"
              >
                <a-input
                  v-decorator="[
                    'application',
                    { rules: [{ required: true, message: '请输入' }] },
                  ]"
                  placeholder="请输入"
                /> </a-form-item
            ></a-col>
            <a-col :span="12">
              <a-form-item
                :label-col="formItemLayout.labelCol"
                :wrapper-col="formItemLayout.wrapperCol"
                label="房东电话"
              >
                <a-input
                  v-decorator="[
                    'holderTel',
                    { rules: [{ required: true, message: '请输入' }] },
                  ]"
                  placeholder="请输入"
                /> </a-form-item
            ></a-col>
            <a-col :span="12">
              <a-form-item
                :label-col="formItemLayout.labelCol"
                :wrapper-col="formItemLayout.wrapperCol"
                label="经度"
              >
                <a-input
                  v-decorator="[
                    'lng',
                    { rules: [{ required: true, message: '请输入' }] },
                  ]"
                  placeholder="请输入"
                />
              </a-form-item>
            </a-col>
            <a-col :span="12">
              <a-form-item
                :label-col="formItemLayout.labelCol"
                :wrapper-col="formItemLayout.wrapperCol"
                label="纬度"
              >
                <a-input
                  v-decorator="[
                    'lat',
                    { rules: [{ required: true, message: '请输入' }] },
                  ]"
                  placeholder="请输入"
                />
              </a-form-item>
            </a-col>
            <a-col :span="12">
              <a-form-item
                :label-col="formItemLayout.labelCol"
                :wrapper-col="formItemLayout.wrapperCol"
                label="详细地址巷"
              >
                <a-input
                  v-decorator="[
                    'lineName',
                    { rules: [{ required: true, message: '请输入' }] },
                  ]"
                  placeholder="请输入"
                />
              </a-form-item>
            </a-col>
            <a-col :span="12">
              <a-form-item
                :label-col="formItemLayout.labelCol"
                :wrapper-col="formItemLayout.wrapperCol"
                label="建设控制地带"
              >
                <a-input
                  v-decorator="[
                    'msJskzdd',
                    { rules: [{ required: true, message: '请输入' }] },
                  ]"
                  placeholder="请输入"
                /> </a-form-item
            ></a-col>
            <a-col :span="12">
              <a-form-item
                :label-col="formItemLayout.labelCol"
                :wrapper-col="formItemLayout.wrapperCol"
                label="户主或联系人名字"
              >
                <a-input
                  v-decorator="[
                    'name',
                    { rules: [{ required: true, message: '请输入' }] },
                  ]"
                  placeholder="请输入"
                />
              </a-form-item>
            </a-col>
            <a-col :span="12">
              <a-form-item
                :label-col="formItemLayout.labelCol"
                :wrapper-col="formItemLayout.wrapperCol"
                label="普查码"
              >
                <a-input
                  v-decorator="[
                    'pcCode',
                    { rules: [{ required: true, message: '请输入' }] },
                  ]"
                  placeholder="请输入"
                /> </a-form-item
            ></a-col>
            <a-col :span="12">
              <a-form-item
                :label-col="formItemLayout.labelCol"
                :wrapper-col="formItemLayout.wrapperCol"
                label="场所面积"
              >
                <a-input
                  v-decorator="[
                    'siteArea',
                    { rules: [{ required: true, message: '请输入' }] },
                  ]"
                  placeholder="请输入"
                />
              </a-form-item>
            </a-col>
            <a-col :span="12">
              <a-form-item
                :label-col="formItemLayout.labelCol"
                :wrapper-col="formItemLayout.wrapperCol"
                label="详细地址街"
              >
                <a-input
                  v-decorator="[
                    'streetName',
                    { rules: [{ required: true, message: '请输入' }] },
                  ]"
                  placeholder="请输入"
                /> </a-form-item
            ></a-col>
          </a-row>
          <a-row>
            <a-col :span="12">
              <a-form-item
                :label-col="formItemLayout.labelCol"
                :wrapper-col="formItemLayout.wrapperCol"
                label="内部图片"
              >
                <Upload :imageUrl="inImage" @getImg="getImgIn" />
              </a-form-item>
            </a-col>
            <a-col :span="12">
              <a-form-item
                :label-col="formItemLayout.labelCol"
                :wrapper-col="formItemLayout.wrapperCol"
                label="外部图片"
              >
                <Upload :imageUrl="outImage" @getImg="getImgOut" />
              </a-form-item>
            </a-col>
          </a-row>
        </a-form>
      </div>
    </a-modal>
  </div>
</template>

<script>
import { Modal } from "ant-design-vue";
import { message } from "ant-design-vue";
import dictMixin from "@/mixins/dictMixin";
import dayjs from "dayjs";
import Upload from "@/component/upload/index.vue";
export default {
  mixins: [dictMixin],
  components: {
    Upload,
  },
  data() {
    return {
      inImage: "",
      outImage: "",
      loading: true,
      dialogVisible: false,
      queryForm: { current: 20, offset: 1 },
      total: 0,
      form: this.$form.createForm(this, { name: "coordinated" }),
      id: null,
      tableData: [],
      tableHeight: "calc(100vh - 280px)",
      columns: [
        {
          title: "序号",
          dataIndex: "index",
          key: "index",
        },
        {
          title: "详细地址描述",
          dataIndex: "addressDetail",
          key: "addressDetail",
        },
        {
          title: "详细地址门牌号",
          dataIndex: "addressNumber",
          key: "addressNumber",
        },
        {
          title: "用途",
          dataIndex: "application",
          key: "application",
        },
        {
          title: "是否院落",
          dataIndex: "courtyard",
          key: "courtyard",
        },
        {
          title: "房东电话",
          dataIndex: "holderTel",
          key: "holderTel",
        },
        {
          title: "非商家ID",
          dataIndex: "id",
          key: "id",
        },
        {
          title: "土地性质",
          dataIndex: "landNature",
          key: "landNature",
          customRender: (text) => {
            let findOne = this.landNatureList.find(
              (item) => item.dictValue == text
            );
            return (findOne && findOne.dictLabel) || "";
          },
        },
        {
          title: "纬度",
          dataIndex: "lat",
          key: "lat",
        },
        {
          title: "经度",
          dataIndex: "lng",
          key: "lng",
        },
        {
          title: "详细地址巷",
          dataIndex: "lineName",
          key: "lineName",
        },
        {
          title: "保护范围",
          dataIndex: "msBhfw",
          key: "msBhfw",
          customRender: (text) => {
            let findOne = this.msBhfwList.find(
              (item) => item.dictValue == text
            );
            return (findOne && findOne.dictLabel) || "";
          },
        },
        {
          title: "建设控制地带",
          dataIndex: "msJskzdd",
          key: "msJskzdd",
        },
        {
          title: "户主或联系人名字",
          dataIndex: "name",
          key: "name",
        },
        {
          title: "普查码",
          dataIndex: "pcCode",
          key: "pcCode",
          scopedSlots: { customRender: "description" },
        },
        {
          title: "成立日期",
          dataIndex: "pushTime",
          key: "pushTime",
        },
        {
          title: "保护等级",
          dataIndex: "protectLevel",
          key: "protectLevel",
        },
        {
          title: "普查时间",
          dataIndex: "pushTime",
          key: "pushTime",
        },
        {
          title: "场所面积",
          dataIndex: "siteArea",
          key: "siteArea",
        },
        {
          title: "详细地址街",
          dataIndex: "streetName",
          key: "streetName",
        },
        {
          title: "操作",
          key: "action",
          width: 120,
          align: "center",
          fixed:'right',
          scopedSlots: { customRender: "action" },
        },
      ],
      formItemLayout: {
        labelCol: { span: 7 },
        wrapperCol: { span: 17 },
      },
      formTailLayout: {
        labelCol: { span: 5 },
        wrapperCol: { span: 19, offset: 4 },
      },
      isYardList: [
        {
          value: "是",
          label: "是",
        },
        {
          value: "否",
          label: "否",
        },
      ],
      typeList: [
        {
          value: "1",
          label: "非公有经济组织",
        },
        {
          value: "2",
          label: "公有经济组织",
        },
      ],
      statusList: [
        {
          value: 0,
          label: "正常",
        },
        {
          value: 1,
          label: "异常",
        },
        {
          value: 2,
          label: "停业",
        },
      ],
      courtyardLayoutList: [],
      landNatureList: [],
      msBhfwList: [],
      propertyRightList: [],
    };
  },
  async mounted() {
    await this.getDictList();
    await this.getList();
    window.addEventListener("resize", this.handleResize);
    this.handleResize();
  },
  beforeDestroy() {
    window.removeEventListener("resize", this.handleResize);
  },
  methods: {
    handleSearch(){
      this.queryForm.offset = 1;
      this.getList();
    },
    handleResize() {
      const minHeight = 300; // 最小高度300px
      const offsetHeight = 280; // 页面其他元素预估高度
      const calculatedHeight = window.innerHeight - offsetHeight;
      this.tableHeight = `${Math.max(calculatedHeight, minHeight)}px`;
    },
    getList() {
      this.loading = true;
      const url = "/government-platform-center/xunjian/livePersion/queryByPage";
      const data = this.queryForm;
      this.$axios.post(url, data).then((res) => {
        if (res.data.code == 0) {
          this.tableData = res.data.data.map((item, index) => {
            this.statusList.forEach((i) => {
              if (i.value == item.status) {
                item["statusName"] = i.label;
              }
            });
            this.typeList.forEach((i) => {
              if (i.value == item.twoNewOrganizationType) {
                item["typeName"] = i.label;
              }
            });
            item["index"] = index + 1;
            return item;
          });
          this.total = res.data.total;
          this.loading = false;
        }
      });
    },
    getDictList() {
      this.$axios
        .get(
          "/government-platform-center/dictData/queryByCode?dictType=COURTYARD_LAYOUT"
        )
        .then((res) => {
          if (res.data.code == 0) {
            this.courtyardLayoutList = res.data.data;
          }
        });
      this.$axios
        .get(
          "/government-platform-center/dictData/queryByCode?dictType=LAND_NATURE"
        )
        .then((res) => {
          if (res.data.code == 0) {
            this.landNatureList = res.data.data;
          }
        });
      this.$axios
        .get(
          "/government-platform-center/dictData/queryByCode?dictType=PROTECT_AREA"
        )
        .then((res) => {
          if (res.data.code == 0) {
            this.msBhfwList = res.data.data;
          }
        });
      this.$axios
        .get(
          "/government-platform-center/dictData/queryByCode?dictType=PROPERTY_RIGHT"
        )
        .then((res) => {
          if (res.data.code == 0) {
            this.propertyRightList = res.data.data;
          }
        });
    },
    getImgIn(e) {
      this.inImage = e;
    },
    getImgOut(e) {
      this.outImage = e;
    },
    cleanQuery() {
      this.queryForm = { current: 20, offset: 1 };
      this.getList();
    },
    // 分页
    onShowSizeChange(current, pageSize) {
      this.queryForm.current = pageSize;
      this.queryForm.offset = 1;
      this.getList();
    },
    pageChange(current) {
      this.queryForm.offset = current;
      this.getList();
    },
    delFn(text, record) {
      const that = this;
      Modal.confirm({
        title: "确认删除",
        content: "您确定要删除这项内容吗？",
        okText: "确认",
        cancelText: "取消",
        onOk() {
          const url = `/government-platform-center/xunjian/livePersion/delete?livePersionId=${text.id}`;
          that.$axios.delete(url).then((res) => {
            if (res.data.code == 0) {
              that.getList();
              message.success("操作成功");
            }
          });
        },
        onCancel() {
          // 在此处理取消逻辑
          console.log("删除已取消");
        },
      });
    },
    addFn() {
      this.dialogVisible = true;
      this.id = null;
      this.form.resetFields();
    },
    editFn(text, record) {
      this.dialogVisible = true;
      const url = `/government-platform-center/xunjian/livePersion/detail?livePersionId=${text.id}`;
      this.$axios.get(url).then((res) => {
        if (res.data.code == 0) {
          const data = res.data.data;
          data.id = text.id;
          this.form.setFieldsValue({
            ...data,
            noShopId: String(data.noShopId),
          });
          this.id = data.id;
          this.inImage = data.inImage;
          this.outImage = data.outImage;
        }
      });
    },
    putDict() {
      this.form.validateFields((err, values) => {
        if (err) {
          return;
        }
        if (!this.id) {
          const form = values;
          form.registerTime = dayjs(form.registerTime).format("YYYY-MM-DD");
          form.pushTime = dayjs(form.pushTime).format("YYYY-MM-DD HH:mm:ss");
          form.inImage = this.inImage;
          form.outImage = this.outImage;
          const url = "/government-platform-center/xunjian/livePersion/add";
          this.$axios.post(url, form).then((res) => {
            if (res.data.code == 0) {
              this.getList();
              this.reSetForm();
              this.dialogVisible = false;
              message.success("新增成功");
            }
          });
        } else {
          const form = { ...values, id: this.id };
          form.registerTime = dayjs(form.registerTime).format("YYYY-MM-DD");
          form.pushTime = dayjs(form.pushTime).format("YYYY-MM-DD HH:mm:ss");
          form.inImage = this.inImage;
          form.outImage = this.outImage;
          const url = "/government-platform-center/xunjian/livePersion/edit";
          this.$axios.post(url, form).then((res) => {
            if (res.data.code == 0) {
              this.getList();
              this.reSetForm();
              this.dialogVisible = false;
              message.success("修改成功");
            }
          });
        }
      });
    },
    reSetForm() {
      // this.form = { dictName: null, dictType: null, remark: null }
    },
  },
};
</script>

<style lang="scss" scoped>
.ant-row {
  border-radius: 5px;
  background: #fff;
  color: #000;
}

// 添加以下样式解决固定列表头高度不一致问题
:deep(.table-fixed) {
  .ant-table-thead {
    height: 80px !important; // 根据实际情况调整这个高度值
    border: 1px solid red;
  }
}

:deep(.ant-table-fixed-right) {
  .ant-table-thead > tr > th {
    height: 80px; // 与上面的值保持一致
  }
}
::v-deep .ant-table-thead > tr > th {
  color: #000;
  font-weight: bold !important;
}
// 添加表头文字换行样式
:deep(.ant-table-thead) {
  .ant-table-cell {
    white-space: normal;
    word-break: break-word;
    line-height: 1.2;
    padding: 8px;
  }
}

.ant-col {
  margin: 10px 0;
}

.ant-select {
  width: 60%;
}

.ant-input {
  width: 60%;
}
.table {
  width: 100%;
  overflow-x: auto !important;
}

/* 添加表格原生滚动条样式 */
::v-deep .ant-table-body {
  overflow-x: auto !important;
  /* overflow-y: auto !important; */
  /* max-height: 500px; 设置最大高度，超出时显示垂直滚动条 */
}

/* 确保使用原生滚动条样式 */
::v-deep .ant-table-body::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::v-deep .ant-table-body::-webkit-scrollbar-thumb {
  background-color: #c1c1c1;
  border-radius: 4px;
}

::v-deep .ant-table-body::-webkit-scrollbar-track {
  background-color: #f1f1f1;
}

/* 修复固定列的问题 */
::v-deep .ant-table-fixed-right {
  right: 0px; /* 为滚动条留出空间 */
}
</style>
